<template>
  <div class="app-container purchasewarehouseorder">
    <!-- 详情 -->
    <div class="loss-info">
      <el-card v-loading="lossInfoLoading" class="box-card">
        <el-row>
          <el-col :offset="2" :span="10">编&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：{{ lossCheck.lossCheckNo }}
          </el-col>
          <el-col :offset="2" :span="10">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：{{ lossCheck.lossCheckState |
          formatStatus }}
          </el-col>
        </el-row>
        <el-row>
          <el-col :offset="2" :span="10">仓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;库：{{ lossCheck.warehouseName }}
          </el-col>
          <el-col :offset="2" :span="10">创建时间：{{ lossCheck.gmtCreate | formatDateAndTime }}</el-col>
        </el-row>
        <el-row>
          <el-col :offset="2" :span="10">操&nbsp;&nbsp;作&nbsp;&nbsp;人：{{ lossCheck.adminRealname }}</el-col>
          <el-col :offset="2" :span="10">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：{{ lossCheck.lossCheckInfo }}
          </el-col>
        </el-row>
      </el-card>
    </div>
    <!-- 商品详情 -->
    <div class="loss-goods-info">
      <el-col :span="6">损耗类型：{{ lossCheck.lossType | formatType }}</el-col>
      <el-col :span="6">损耗总额：{{ lossCheck.lossCheckAmount }}元</el-col>
      <el-col :span="6">损耗总数：{{ lossCheck.lossCheckCount }}</el-col>
      <el-col :span="6" style="text-align: right;">
        <el-button
          type="primary"
          size="mini"
          @click="handlePrint"
        >打印</el-button>
      </el-col>
      <div class="loss-goods-list">
        <el-table
          v-loading="lossGoodsLoading"
          :data="lossGoodsList"
          border
          element-loading-text="正在查询中。。。"
          fit
          highlight-current-row
          size="small"
          style="white-space: pre-line;"
        >
          <el-table-column align="center" label="商品" prop="goodsName" width="200px">
            <template slot-scope="scope">
              <el-col :span="6"><img :src="scope.row.goodsImg + '?x-oss-process=style/100px'" width="40"></el-col>
              <el-col :span="18" style="padding-top: 15px;">{{ scope.row.goodsName }}</el-col>
            </template>
          </el-table-column>
          <el-table-column align="center" label="单位" prop="goodsUnit"/>
          <el-table-column align="center" label="条形码" prop="goodsBarCode"/>
          <el-table-column align="center" label="损耗数量" prop="lossCheckGoodsNum"/>
          <el-table-column align="center" label="损耗金额">
            <template slot-scope="scope">
              <el-col>{{ (scope.row.lossCheckGoodsAmount * (scope.row.lossCheckGoodsNum )) / 100 }}元</el-col>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 操作日志 -->
    <div class="loss-log">
      <el-col :span="4">
        <div>操作日志</div>
      </el-col>
      <div class="loss-info-list">
        <el-table
          v-loading="lossLogsLoading"
          :data="lossLogsList"
          border
          element-loading-text="正在查询中。。。"
          fit
          highlight-current-row
          size="small"
          style="white-space: pre-line;"
        >
          <el-table-column align="center" label="操作时间" width="200">
            <template slot-scope="scope">
              {{ scope.row.gmtCreate | formatGmt }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作人" prop="lossCheckUser"/>
          <el-table-column align="center" label="操作账号" prop="lossCheckUsername"/>
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              {{ scope.row.lossCheckState | formatStatus }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 打印 -->
    <el-dialog title="打印" :visible.sync="dialogTableVisible" class="printBox">
      <printHtml :outbound="4" :pOrderId="pOrderId" />
    </el-dialog>
  </div>
</template>

<style>
  .bg-red {
    color: #F56C6C;
  }

  .loss-info .el-row {
    margin-bottom: 20px;
  }

  .loss-goods-info {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .loss-goods-list, .loss-info-list {
    padding-top: 40px;
  }

</style>
<script>
import { detail } from '@/api/warehouseloss'
import { formatDateAndTime } from '@/filters'

export default {
  name: 'StockCheckDetail',
  components: {},
  filters: {
    formatGmt(time) {
      if (time == null || time === '') {
        return '无'
      }
      return formatDateAndTime(time)
    },
    formatStatus(status) {
      if (status === 1) {
        return '已确认'
      } else if (status === 0) {
        return '待确认'
      }
    },
    formatType(type) {
      switch (type) {
        case 0 :
          return '普通'
        case 1 :
          return '品鉴'
        default :
          return ''
      }
    }
  },
  data() {
    return {
      dialogTableVisible: false,
      pOrderId: "", //844
      lossCheck: {
        id: this.$route.query.lossCheckId,
        lossCheckNo: undefined,
        gmtCreate: ''
      },
      lossCheckId: this.$route.query.lossCheckId,
      lossGoodsLoading: true,
      lossGoodsList: [],
      lossLogsLoading: true,
      lossLogsList: [],
      lossInfoLoading: true
    }
  },
  created() {
    this.lossDetail()
  },
  methods: {
    lossDetail() {
      this.lossGoodsLoading = true
      this.lossLogsLoading = true
      this.lossInfoLoading = true
      detail(this.lossCheck).then(response => {
        this.lossCheck = response.data.data
        this.lossGoodsLoading = false
        this.lossLogsLoading = false
        this.lossInfoLoading = false
        this.lossGoodsList = this.lossCheck.warehouseLossGoodsDTOS
        this.lossLogsList = this.lossCheck.warehouseLossOperLogDTOS
      }).catch(response => {
        this.lossGoodsLoading = false
        this.lossLogsLoading = false
        this.lossInfoLoading = false
        this.$notify.error({
          title: '失败',
          message: '没有此损耗单'
        })
      })
    },
    handlePrint() {
      // var url = window.location.href.split('#')[0]
      // window.open(`${url}#/printdetail?pOrderId=${this.$route.query.lossCheckId}&outbound=4`)
      this.dialogTableVisible = true;
      this.pOrderId = this.$route.query.lossCheckId;
    }
  }
}
</script>
